<template>
  <div class="card" v-if="communities.length">
    <div class="card-header">加入的社区</div>
    <div class="card-content">
      <el-row>
        <el-col
          v-for="community in communities"
          :key="community.id"
          :sm="6"
          style="margin: .5rem; padding: .5rem; border: 1px solid #ebeef5;"
          class="flex align-items-center"
        >
          <el-avatar :src="community.avatar" shape="square" :size="60" class="shrink-0" />
          <div class="flex-1 m-l-10 no-warp-ellipsis" style="min-width:0;">
            <router-link :to="`/${$rp.COMMUNITIES}/${community.id}`" class="title link">
              {{ community.title }}
            </router-link>
            <div class="info-deep">社区人数：{{ community.counts.members }}</div>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        class="flex m-t-10 align-items-center"
        layout="prev, pager, next"
        hide-on-single-page
        :current-page="curPage"
        :page-count="pageCount"
        @current-change="selectedPage"
      />
    </div>
  </div>
</template>

<script>
import { formatCommunities } from '@/components/communities/format';

export default {
  name: 'JoinedCommunities',
  data() {
    return {
      communities: [],
      loading: false,
      curPage: 1,
      pageCount: 1,
    };
  },
  created() {
    this.loadJoinedCommunities();
  },
  methods: {
    loadJoinedCommunities() {
      this.loading = true;
      this.$api.spaces.joinedCommunities({
        spaceId: this.$route.params.spaceId,
        page: this.curPage,
      }).then((res) => {
        this.communities = formatCommunities(res.data);
        this.curPage = res.kaminari.current_page;
        this.pageCount = res.kaminari.total_pages;
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 页面跳转！
    selectedPage(page) { this.curPage = page; },
  },
  watch: {
    curPage() { this.loadJoinedCommunities(); },
  },
};
</script>

<style></style>
